<template>
  <div>
    <cus-search style="min-width: 1200px;padding-bottom: 0;">
      <cus-search-item>
        <Form
          :model="form"
          :label-width="80"
          ref="formValidate"
          @keydown.native.enter.prevent="onInit"
        >
          <FormItem label="选择日期" class="mr_48 mb_20" prop="">
            <DatePicker
              type="daterange"
              transfer
              ref="formDate"
              format="yyyy-MM-dd"
              @on-change="sDateChange"
              placeholder="开始日期 - 结束日期"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="物资分类" class="mr_48 mb_20" prop="goodsTypeName">
            <Select
              size="large"
              placeholder="请选择物资分类"
              v-model="form.goodsTypeName"
              clearable
              style="width: 200px"
            >
              <Option
                v-for="item in materialTypeList"
                :value="item.name"
                :key="item.name"
              >
                {{ item.name }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="物资名称" class="mr_48 mb_20" prop="">
            <Input
              clearable
              placeholder="请输入物资名称"
              v-model="form.productName"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="存储仓库" class="mr_48 mb_20" prop="">
            <Select
              size="large"
              placeholder="请选择存储仓库"
              clearable
              v-model="form.stockId"
              style="width: 200px"
            >
              <Option
                v-for="item in storehouseTree"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
          </FormItem>
          <cusButton class="mr_20 mb_20" type="primary" @onClick=""
            >查询</cusButton
          >
          <cusButton class="mr_20 mb_20" type="primary" @onClick="reset()"
            >重置</cusButton
          >
        </Form>
      </cus-search-item>
    </cus-search>
    <cus-card class="mt_20" :showTitle="false" style="padding: 20px 20px">
      <cusTable
        border
        :loading="loading"
        :columns="columns"
        :data="data"
        :size="vuex_config.tableSize"
        :bottomClass="['cus-page']"
      >
      </cusTable>
      <div class="cus_page">
        <cus-page :data="pages" class="mt_20" @pageChange=""></cus-page>
      </div>
    </cus-card>
  </div>
</template>
<script>
import {} from "@/api/business/manager";

export default {
  components: {},
  data() {
    return {
      loading: false,
      form: {
        startDate: "",      // 开始日期
        stopDate: "",       // 结束日期
        goodsTypeName: "",  // 物资分类
        productName: "",    // 物资名称
        stockId: "",        // 存储仓库id
      },
      materialTypeList: [], // 物资分类tree数据
      storehouseTree: [],   // 存储仓库tree数据
      ruleValidate: {},
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 70,
        },
        {
          title: "统计日期",
          key: "",
          minWidth: 100,
          align: "center",
        },
        {
          title: "出入库类型",
          key: "",
          minWidth: 100,
          align: "center",
        },
        {
          title: "物资分类",
          key: "",
          minWidth: 100,
          align: "center",
        },
        {
          title: "物资名称",
          key: "",
          minWidth: 100,
          align: "center",
        },
        {
          title: "单位重量",
          key: "",
          minWidth: 100,
          align: "center",
        },
        {
          title: "计量单位",
          key: "",
          minWidth: 100,
          align: "center",
        },
        {
          title: "入库重量",
          key: "",
          minWidth: 100,
          align: "center",
        },
        {
          title: "出库重量",
          key: "",
          minWidth: 100,
          align: "center",
        },
        {
          title: "结存重量",
          key: "",
          minWidth: 100,
          align: "center",
        },
      ],
      data: [],
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
      tableHeight: 0,
    };
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 370; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
    this.onInit();
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 370; // 表格自适应高度
      }, 100);
    },
    onInit() {},
    // DatePicker事件(起止日期)
    sDateChange(date) {
      console.log(date);
      this.form.startDate = date[0], //开始日期
      this.form.stopDate = date[1]; //结束日期
      this.onInit();
    },
    reset() {
      this.$refs.formDate.handleClear();
      this.$refs["formValidate"].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ivu-select-large.ivu-select-single .ivu-select-selection .ivu-select-placeholder {
  font-size: 14px;
}
.btnBox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>
